<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <van-cell title="头像" is-link center>
      <van-image width="30" height="30" fit="cover" round :src="user.photo" @click='$refs.fileRef.click()' />
    </van-cell>
    <input type='file' accept='image/*' ref="fileRef" hidden @change='onFileChange' />

    <van-cell title="昵称" is-link :value="user.name" @click="isShowEditName=true" />
    <van-cell title="性别" is-link @click=' isShowEditGender=true' :value="user.gender === 0 ? '男' :'女' " />
    <van-cell title="生日" is-link :value="user.birthday" @click='isShowBirthday=true' />
    <!-- 修改名字 -->
    <van-popup v-model="isShowEditName" position="bottom" :style="{ height: '100%' }">
      <update-name v-if='isShowEditName' v-model='user.name' @close='isShowEditName=false' />
    </van-popup>
    <!-- 修改 -->
    <van-popup v-model="isShowEditGender" position="bottom">
      <update-gender v-if='isShowEditGender' v-model='user.gender' @close='isShowEditGender=false' />
    </van-popup>
    <!-- 修改 -->
    <van-popup v-model="isShowBirthday" position="bottom">
      <update-birthday v-if='isShowBirthday' v-model='user.birthday' @close='isShowBirthday=false' />
    </van-popup>
    <!-- 修改 -->
    <van-popup v-model="isShowPhoto" position="bottom" :style="{ height: '100%' }">
      <update-photo v-if='isShowPhoto' :file='preview' @photo='user.photo=$event' @close='isShowPhoto=false' />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdatePhoto from './components/update-photo.vue'
export default {
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  data() {
    return {
      user: {},
      isShowEditName: false,
      isShowEditGender: false,
      isShowBirthday: false,
      preview: null,
      isShowPhoto: false
    }
  },
  created() {
    this.loadUserProfile()
  },
  methods: {
    async loadUserProfile() {
      const { data: res } = await getUserProfile()
      this.user = res.data
    },
    onFileChange() {
      this.preview = this.$refs.fileRef.files[0]
      this.isShowPhoto = true
      this.$refs.fileRef.value = ''
    }
  }
}
</script>
<style lang="less" scoped>
.van-image {
  vertical-align: middle;
}
</style>
